<template>
    <div id="personManger">
        <mt-header fixed title="个人中心">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
        </mt-header>

         <div class="person-list-option" ref="personOption" v-getH="40">
            <div>
                <div class="person-opation">
                    <!-- 订单 -->
                    <mt-cell
                        :title="item.title"
                        is-link
                        v-for="(item, index) in list"
                        :key="index"
                        @click.native="changeInfo(index)"
                        >
                        <span class="icon">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                        </span>
                    </mt-cell>
                </div>
            </div>
        </div>
         <div class="changeH" @click.self="newImg = false" v-if="newImg">
             <div class="content">
                <p>修改头像</p>
                <p>请选择您的头像</p>
                <div>
                    <input type="file"  @change="changeH">
                    <mt-button type="danger" size="large">选择新头像</mt-button>
                </div>
             </div>
         </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import { MessageBox  } from 'mint-ui';
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
    data(){
        return {
            newImg: false,
            list: [
                {title: '修改用户名', icon: '#icon-yonghuming'},
                {title: '修改密码', icon: '#icon-mima'},
                {title: '修改邮箱', icon: '#icon-youxiang'},
                {title: '修改头像', icon: '#icon-touxiang'},
                {title: '成为商家', icon: '#icon-shangjia'},
                {title: '宣布破产', icon: '#icon-shenqingpochan'}
            ],
        }
    },
    inject: ['goB'],
    computed:{
        ...mapState([
            'storeFlag',
            'shopId',
            'uname',
            'type',
            'email',
            'hImg',
            'sname'
        ])
    },
    created(){
        this.$nextTick(() =>{
            this.$nextTick(() =>{
                this.personOptionScroll = new Bscroll(this.$refs.personOption, {click: true})
            })
        })
    },
    methods:{
        ...mapMutations([
            'setState',
            'setToast',
            'setMessage'
        ]),
        ...mapActions([
            'changeLogin',
            'removeShop',
            'changeNS'
        ]),


        //修改相应的数据
        changeInfo(index){
            switch(index){
                case 0:
                    this.changeU()
                    break
                case 1:
                    this.changeP()
                    break
                case 2:
                    this.changeE()
                    break
                case 3:
                    this.newImg = true
                    break
                case 4:
                    this.changeT(index)
                    break
                case 5:
                    this.changeT(index)
                    break
                default:
                    return console.log('无效操作')
            }   
        },
        //修改用户名
        changeU(){
            MessageBox.prompt('输入新的用户名', '修改用户名').then(({value, action}) =>{
                //此时修改用户名需要修改
                /*
                    修改用户名 要修改以下几个信息 uname
                        1 商店的 statusName----> shopId storeFlag
                        2 优惠劵的 uname-------> belong  storeFlag + "b"
                        3 订单的 orderUName----> otherOrderId 但是这是自己的storeFlag
                    修改商店名字 sname
                        1 优惠劵的 sname --------> belong storeFlag + "b"
                        2 订单的 orderSName-----> otherOrderId 但是这是自己的storeFlag

                */
                this.changeLogin({                   
                    _id: this.storeFlag,
                    data:{
                        //传入这个是因为修改用户名需要判断一下用户名是否存在
                        changeUname: true,
                        uname: value,
                    }
                }).then(code =>{
                    //修改优惠劵
                    this.changeNS({
                        url: 'changeO',
                        data:{
                            orderUName: value
                        }
                    }).then( msg =>{

                    this.setState({uname: value})
                    this.setToast('修改用户名成功')
                    //此时说明修改成功， 判断是否是商家 是继续修改
                    if(this.type != '商家') return //不是商家不需要修改 

                    //是商家修改 订单和优惠劵
                    this.changeOther(value)

                    }, msg =>{

                        //此时修改失败 重置
                        this.setMessage('修改用户名失败')

                    })

                },(code) =>{
                    //code === -2 则说明用户名存在

                    if(code === -2) return this.setMessage('用户名已经存在, 要换一个哟')
                    this.setMessage('修改用户名失败')
                })

            }, () =>{
                console.log('已经取消修改用户名')
            })
        },


        //一旦修改 商店名字 就要修改优惠劵相应数据
        changeOther(uname){
            //否则 修改了用户名
            this.changeNS({
                url: 'changeC',
                data: {
                    uname
                }
            }).then(msg =>{
               console.log('修改优惠劵成功')
            }, () =>{

                console.log('修改优惠劵成功')
            })

             //否则 修改了订单 发送请求
            this.changeNS({
                url: 'changeO',
                data: {
                    orderUName: uname
                }
            }).then(msg =>{
                console.log('修改订单成功')
            }, () =>{
               console.log('修改订单失败')
            })
        },

        //修改密码
        changeP(){
             MessageBox.prompt('输入新的密码', '修改密码', {inputType: 'password'}).then(({value, action}) =>{

                 //验证信息
                if(!this.checkInfo(value)) return

                this.changeLogin({
                    _id: this.storeFlag,
                    data:{
                        paw: value
                    }
                 }).then(() =>{
                     this.setToast('修改密码成功')
                 }, () =>{
                     this.setToast('修改密码失败，请稍后再试')
                 })
            }, () =>{
                console.log('已经取消修改密码')
            })
        },
        //修改邮箱
        changeE(){
             MessageBox.prompt('输入新的邮箱', '修改邮箱',{inputType: 'email'}).then(({value, action}) =>{

                const regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")

                 //验证信息
                if(!this.checkInfo(value, regEmail)) return

                this.changeLogin({
                    _id: this.storeFlag,
                    data:{
                        email: value
                    }
                 }).then(() =>{
                     this.setState({email: value})
                     this.setToast('修改邮箱成功')
                 }, () =>{
                     this.setToast('修改邮箱失败，请稍后再试')
                 })

            }, () =>{
                console.log('已经取消修改邮箱')
            })
        },
        //修改头像
        changeH(ev){
                MessageBox({
                    title: '提示',
                    message: '是否选择该图片作为您的新头像',
                    showCancelButton: true
                }).then((action) =>{
                
                if(action === 'cancel') return
                
                const file = ev.target.files[0]

                if (!(/\.(jpe?g|png|gif)$/i.test(file.name))) return this.message('图片格式错误')

                //读取图片 修改数据
                const reader = new FileReader()
        
                reader.readAsDataURL(file)

                reader.addEventListener("load", (ev) =>{
                    this.changeLogin({
                        _id: this.storeFlag,
                        data:{
                            hImg: ev.target.result
                        }
                    }).then(() =>{
                        this.setToast('修改头像成功, 快点看看你的新头像吧')
                    }, () =>{
                        this.setToast('修改头像失败，请稍后再试')
                    })
                }, false);
                
            }, () =>{
                console.log('已经取消修改头像')
            })
        },
        //修改用户类型 商家 普通用户
        changeT(index){
            
            /*
                1 因为修改 用户类型 都是同一个函数 因此需要判断 点击的是哪一个
                    1 如果本身就是该类型 就不能在修改  提示 已经是该类型了
                    2 index === 4 成为商家  index === 5 宣布破产 即成为 普通用户 (这里考虑 要不要删除它之前的商店信息)
            */


            if(index === 4){
               //很好做直接让他跳转到 shop即可 因为不是商家 跳转到商家的话  路由监听 已经有相应的操作了
               //此时判断一下他是不是商家
               if(this.type === '商家') return this.message('您已经是商家了，无需重复修改')
               //只要跳转到这个路由即可 App组件那里有监听
               this.$router.push('/shop')

               return
            }

            //否则点击的是 成为破产
            if(this.type === '普通用户') return this.message('您已经是普通用户了，无需重复修改')

            MessageBox({
                title: '提示',
                message: '一旦宣布破产，将会删除商店的相关信息?',
                showCancelButton: true
            }).then(action => {
                if(action === 'confirm'){
                    this.changeLogin({data: {
                            _id: this.storeFlag,
                            data: {
                                type: '普通用户',
                            }
                    }}).then(() =>{
                        this.setToast('您已经破产')
                            //此时应该再发送一条信息 看一下信息成功删除了没有
                            //此时应该发送消息删除该商店的所有信息
                            // 1 删除清空商店信息  2 优惠劵 显示已经过期                     
                            this.removeShop({
                                shopId: this.shopId
                            })
                    }, () =>{
                        this.setToast('破产失败，请稍后再试')
                    })  
                }              
            })
        },
        //验证输入内容是否正确
        checkInfo(value, regEmail){

            if(!value || !value.replace(/^\s+|\s+$/g,"")){
                return this.message('内容不能为空，修改失败')
            }else if(!value.replace(/^\s+|\s+$/g,"")) {
                return this.message('空格无效，修改失败')
            }else if(regEmail && !regEmail.test(value)){
                return this.message('邮箱格式错误')
            }

            return true
        },
        //提示信息
        message(msg){
            MessageBox.alert(msg)
        }
    },
    //指令
    directives:{
        getH:{
            inserted: function (el, binding) {
                el.style.height = document.querySelector('html').clientHeight - binding.value + 'px'
            }
        }
    }
}
</script>

<style lang="less" scoped>
#personManger{
    height: 100%;
    overflow: hidden;
    .person-list-option{
        margin-top: 40px;
    }
    .changeH{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
        > div{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -140px;
            margin-top: -70px;
            width: 280px;
            height: 140px;
            background: #fff;
            > p{
                text-align: center;
                color: #666;
                margin: 15px 0;
            }
            > div{
                position: relative;
                input{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    opacity: 0;
                }
            }
        }
    }
}
</style>


